<template>
  <div class="main-table">
    <table class="mailTable" :style="styleObject" v-if="s_showByRow" cellspacing="0" cellpadding="0">
      <tr v-for="index in rowCount" :key="index">
        <td class="column">{{tableData[index * 2 - 2].key}}</td>
        <td>{{tableData[index * 2 - 2].value}}</td>
        <td class="column">{{tableData[index * 2 - 1] !== undefined ? tableData[index * 2 - 1].key : ''}}</td>
        <td>{{tableData[index * 2 - 1] !== undefined ? tableData[index * 2 - 1].value : ''}}</td>
      </tr>
    </table>
    <table class="mailTable" :style="styleObject" v-else cellspacing="0" cellpadding="0">
      <tr v-for="index in rowCount" :key="index">
        <td class="column">{{tableData[index - 1].key}}</td>
        <td>{{tableData[index - 1].value}}</td>
        <td class="column">
          {{tableData[rowCount + index - 1] !== undefined ? tableData[rowCount + index - 1].key : ''}}
        </td>
        <td>{{tableData[rowCount + index - 1] !== undefined ? tableData[rowCount + index - 1].value : ''}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'MailTable',
  props: ['tableData', 'tableStyle', 'showByRow'],
  data() {
    return {
      styleObject: {},
      s_showByRow: true
    }
  },
  computed: {
    rowCount: function () {
      return Math.ceil(this.tableData.length / 2)
    }
  },
  created() {
    this.styleObject = this.tableStyle
    if (this.showByRow !== undefined) {
      this.s_showByRow = this.showByRow
    }
  }
}
</script>

<style lang="scss" scoped>
.mailTable, .mailTable tr, .mailTable tr td {
  border: 1px solid #E6EAEE;
}

.mailTable {
  font-size: 16px;
  color: #969696;
  text-align: center;
}

.mailTable tr td {
  border: 1px solid #E6EAEE;
  width: 150px;
  height: 46px;
  line-height: 46px;
  box-sizing: border-box;
  padding: 0 10px;
}

.mailTable tr td {
  background-color: #EFF3F6;
  color: #969696;
}
</style>
